<template>
  <div>
    <!-- search start -->
    <search-bar placeHolder="功能待完善..."
                @handleSearch="init"
                :isShowAdd="true"
                btnText="添加险种"
                @handleAdd="handleCompany" />
    <!-- search end -->

    <!-- table start -->
    <table-data-el :tableData="tableData.list"
                   :tableLabel="tableLabel"
                   :pageCount="tableData.rows"
                   v-loading="loading"
                   @handleCompany="handleCompany" />
    <!-- table end -->

    <!-- dialog start -->
    <el-dialog :visible.sync="isShowDialog"
               center
               :title="dialogTitle"
               width="30%"
               @close="Object.keys(form).map((key) => form[key] = '')">
      <el-form :model="form"
               ref="form"
               label-width="100">
        <el-form-item label="险种"
                      prop="type"
                      :rules="[
                                { required: true, message: '请填写险种名称', trigger: 'blur'}
                            ]">
          <el-input v-model="form.type"
                    placeHolder="请输入险种名称"
                    style="width:55%;margin-right:3%;"></el-input>
          <el-button type="primary"
                     @click="handleDp('form')">保存</el-button>
          <el-button type="danger"
                     @click="isShowDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- dialog end -->
  </div>
</template>

<script>
    import tableDataEl from '@/views/Setup/common/table'

    export default {
  name: "dbList",
  data () {
    return {
      search: '',
      page: 1,
      pageSize: 8,
      activeDate: ['', ''],
      tableData: [],
      tableLabel: [
        {
          label: '险种',
          prop: 'type'
        },
        {
          label: '添加时间',
          prop: 'create_time'
        },
        {
          label: '操作',
          operation: true
        }
      ],
      isShowDialog: false,
      dialogTitle: '',
      form: {
        type: ''
      },
      loading: false
    }
  },
  components: {
    tableDataEl
  },
  methods: {
    async init (search = this.search) {
      this.loading = true;
      let valueStr  = Object.assign(search, {page: this.page, pageSize: this.pageSize});
      let res = await this.api.dpList(valueStr);
      res.code ? this.tableData = res.data : this.$message(res.msg);
      this.loading = false;
    },
    handleCompany (...value) {
      if (value[0] === 1) { //添加险种
        this.dialogTitle = '添加险种';
      } else if (value[0] === 2) { //修改险种
        this.dialogTitle = '修改险种';
        Object.assign(this.form, value[1]);
      } else {  //删除险种
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonClass: '取消',
          type: 'warning'
        }).then(() => {
          this.api.removeDp({ id: value[1]['id'] }).then(res => {
            this.$message({
              message: res.msg,
              type: res.code === 1 ? 'success' : 'error'
            });
            this.init();
          })
        }).catch(() => {

        });
        return false;
      }
      this.isShowDialog = true;
    },
    async handleDp (formName) {
      let flag = true;
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          flag = false;
        }
      });
      if (!flag) return false;
      delete this.form['create_time'];
        let res = await this.api.addOrMdfDp(this.form);
      this.init();
      this.$message({
        message: res.msg,
        type: res.code === 1 ? 'success' : 'error'
      });
      this.isShowDialog = false;
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
</style>
